<template>
    <div id="remind-project">
        <h2 class="title">
            <img class="imgSize" src="@/assets/images/common/remind.png" alt="" />
            <span class="fontS16">
                提醒项目
            </span>
        </h2>
        <ul class="remindProject-concent">
            <li class="remindProject-concent_li">
                <div class="remind_title">
                    <div class="fontS16">
                        标准券不足提示：
                    </div>
                    <img @click="linkimage('standard')" class="imgSize" src="@/assets/images/common/link.png" alt="" />
                </div>
                <StandardLack></StandardLack>
            </li>
            <li class="remindProject-concent_li">
                <img class="imgSize linkSzie" src="@/assets/images/common/link.png" alt="" />
            </li>
            <li class="remindProject-concent_li">
                <img class="imgSize linkSzie" src="@/assets/images/common/link.png" alt="" />
            </li>
        </ul>
    </div>
</template>
<script lang="ts">
import { getUser } from '@/utils/user-util';
import { Component, Vue, Watch } from 'vue-property-decorator';
import StandardLack from './standard-lack.vue';
@Component({
    name: 'RemindProject',
    components: { StandardLack },
})
export default class RemindProject extends Vue {
    linkimage(type: string) {
        if (type == 'standard') {
            // TODO 路由替换
            this.JumpRoute('/comprehensive/information', '标准券查询');
        }
    }
    JumpRoute(menuUrl, menuName) {
        let obj = getUser().resources.find(item => item.menuUrl == menuUrl);
        if (obj) {
            top.window.postMessage(menuUrl, '*');
        } else {
            this.yh_message_error(`无${menuName}页面权限,不可跳转!`);
        }
    }
}
</script>
<style lang="scss" scoped>
.title {
    // color: #dc985b;
    margin-left: 10px;
    margin-bottom: 5px;
}
.remindProject-concent {
    // height: 694px;
    height: calc(100vh - 65px);
    min-height: 351px;
    margin-top: 5px;
    border-radius: 5px;
    border: 2px solid #888;
    overflow-y: auto;
    box-shadow: 6px 0 6px 0px #b2a9a0, 0 5px 19px 0 #b2a9a0;
}
.imgSize {
    width: 20px;
    height: 20px;
    margin-bottom: -4px;
}
.remindProject-concent_li {
    // width: 95%;
    // height: 180px;
    height: calc(33vh - 35px);
    margin: 10px;
    border-radius: 5px;
    border: 2px solid #888;
    box-shadow: 6px 0 6px 0px #b2a9a0, 0 5px 19px 0 #b2a9a0;
    overflow: auto;
    .remind_title {
        // color: #dc985b;
        margin: 5px 10px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
    }
}
.linkSzie {
    margin-left: 95%;
    margin-top: 10px;
}

.fontS16 {
    font-size: 16px;
}
</style>
